<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task20 基础JavaScript练习（三）</title>
    <style type="text/css">
    body {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        margin:20px;
        padding:10px;
    }
    
    li {
        display: inline-block;
        background-color: rgba(255, 0, 0, 0.5);
        margin: 2px 2px;
        border-radius: 15px;
        padding: 7px;
        color: #fff;
        transition: all 1s;
    }
    
    li:hover {
        cursor: pointer;
    }
    
    ul {
        padding-left: 0;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    textarea{
        width:100%;
    }

    input {
        border: 1px #ff0000 solid;
        background-color: #fff;
        border-radius: 15px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.5s;
    }
    
    input:hover {
        background-color: rgba(255, 0, 0, 0.7);
        transition: all 0.5s;
    }
    </style>
</head>

<body>
    <div>
        <textarea placeholder="批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔。" id="inputText" cols="100" rows="5"></textarea>
        <input type="button" value="左侧入" id="inputLeftIn">
        <input type="button" value="右侧入" id="inputRightIn">
        <input type="button" value="左侧出" id="inputLeftOut">
        <input type="button" value="右侧出" id="inputRightOut">
        <input type="text" placeholder="输入想查询的标签名" id="searchInput">
        <input type="button" value="查询" id="searchBtn">
        <input type="button" value="重置" id="resetBtn">
    </div>
    <ul id="content"></ul>
    <script type="text/javascript">
    var txt = document.getElementById('inputText');
    var content = document.getElementById("content");

    //左进按钮
    function inputLeftIn() {
        getRegExp();
        var liNum = content.childNodes.length;
        for (var i = 0; i < value.length; i++) {
            if (value[i] != false) {
                if (liNum < 60) {
                    var newItem = document.createElement("li");
                    var textnode = document.createTextNode(value[i]);
                    newItem.appendChild(textnode);
                    content.insertBefore(newItem, content.childNodes[0]);
                    newItem.setAttribute('title', value[i]);
                } else {
                    alert("最多输入60个哦~");
                }
            }
        }
    }
    //右进按钮
    function inputRightIn() {
        getRegExp();
        var liNum = content.childNodes.length;
        if (value != false) { //排除空元素
            for (var i = 0; i < value.length; i++) {
                if (liNum < 60) {
                    var newItem = document.createElement("li");
                    var textnode = document.createTextNode(value[i]);
                    newItem.appendChild(textnode);
                    content.appendChild(newItem);
                    newItem.setAttribute('title', value[i]);
                } else {
                    alert("最多输入60个哦~");
                }
            }
        }
    }

    //左出按钮
    function inputLeftOut() {
        alert("删除的最左侧节点： " + content.firstChild.innerHTML);
        content.removeChild(content.firstChild);
    }
    //右出按钮
    function inputRightOut() {
        alert("删除的最左侧节点： " + content.childNodes[content.childNodes.length - 1].innerHTML);
        content.removeChild(content.childNodes[content.childNodes.length - 1]);
    }
    //给已出现的Li都添加点击事件
    content.addEventListener("click", function(e) {
        content.removeChild(e.target);
    }, false)

    //正则过滤
    function getRegExp() {
        function getValue() {
            value = txt.value.replace(/[^\d\u4e00-\u9fa5a-zA-Z]+/g, " ").split(" ");
            // value = txt.value.replace(/\s+|,|，|；|、|;/g, " ").split(" ");//这个查询在右侧添加时有BUG。
            if (value[0] !== "") {
                return value;
            } else {
                alert("请先输入点东西~");
                return false;
            }
        }
        getValue();
    }

    //查询按钮
    function searchItem() {
        var childLi = content.childNodes;
        var inputTxt = document.getElementById('searchInput').value;
        for (var i = 0; i < childLi.length; i++) {
            childLi[i].style.backgroundColor = "";
            childLi[i].style.color = "";
            if (inputTxt == childLi[i].innerHTML) {
                childLi[i].style.backgroundColor = "#FFFF00";
                childLi[i].style.color = "#000";
            }
        }
    }

    //重置清空函数
    function reset() {
        content.innerHTML = "";
        txt.value = "";
    }

    document.getElementById("inputLeftIn").addEventListener("click", inputLeftIn, false);
    document.getElementById("inputRightIn").addEventListener("click", inputRightIn, false);
    document.getElementById("inputLeftOut").addEventListener("click", inputLeftOut, false);
    document.getElementById("inputRightOut").addEventListener("click", inputRightOut, false);
    document.getElementById('searchBtn').addEventListener("click", searchItem, false);
    document.getElementById('resetBtn').addEventListener("click", reset, false)
    </script>
</body>

</html>
